<template>
    <div>
        <el-dialog v-model="dialogFormVisible" title="修改类型" :close-on-click-modal="false" :show-close="false">
            <el-form>
                <el-form-item label="名称" style="width:200px">
                    <el-input v-model="userInputName" autocomplete="off" maxlength="200" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="updateOperationRecordRemarks" :autosize="{ minRows: 4, maxRows: 6 }"
                        type="textarea" maxlength="400" :show-word-limit="true" placeholder="备注一下呗!" />
                </el-form-item>
                <el-form-item label="日期" style="width:200px">
                    <el-input v-model="nowData" autocomplete="off" maxlength="200" :readonly="true" />
                </el-form-item>

                <el-form-item label="打开可修改上级类型">
                    <el-tooltip class="box-item" effect="light" content="该类型没有上级类型" placement="bottom"
                        :disabled="!disabledSwitch">
                        <span>
                            <el-switch v-model="switchValue" inline-prompt active-text="是" inactive-text="否"
                                size="large" width="100" @change="switchChange" :disabled="disabledSwitch" />
                        </span>

                    </el-tooltip>
                    

                </el-form-item>
                <el-form-item label="">
                    <el-breadcrumb-item style="color:#40ffb1;font-weight:bold" v-if="userXuanZType.length > 0">类型</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="vals in userXuanZType" :key="vals.industryId">{{vals.industryName}}
                    </el-breadcrumb-item>
                </el-form-item>

            </el-form>

            <!-- 嵌套弹出层 -->
            <template>

                <el-dialog v-model="switchValueQIanTao" width="30%" title="选择类型" append-to-body :close-on-click-modal="false" :show-close="false">
                    <!-- <div>
                        <span style="color:red" v-show="arraySubjectNameNew.length < 3">请选择三级类!</span>
                    </div> -->
                    <!-- <div style="height:30px"></div> -->
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item style="color:#40ffb1;font-weight:bold">原类型</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="val in thisTypeOldArray"
                            :key="val">
                            {{val}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div style="height:30px"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item style="color:#40ffb1;font-weight:bold">修改为</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="vals in userXuanZType" :key="vals.industryId">{{vals.industryName}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>

                    <div style="height:20px"></div>
                    <div>
                        <tree-commponent :treeData="thisTypeXuanZe" @treeComponent="treeComponent"
                            :showCheckBox="false">
                        </tree-commponent>
                    </div>

                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="switchValueCancel()">取消</el-button>
                            <el-tooltip class="box-item" effect="light" content="请选择正确类型" placement="bottom"
                        :disabled="disabledPrimary">
                                <span>
                                    <el-button type="primary" @click="AreYouSure()" :disabled="!disabledPrimary">
                                确定</el-button>
                                </span>
                            </el-tooltip>
                            
                        </span>
                    </template>
                </el-dialog>
            </template>


            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisibleCancel()">取消</el-button>
                    <el-tooltip class="box-item" effect="light" :content="text" placement="bottom"
                        :disabled="elTooltipShow">
                        <span>
                            <el-button type="primary" @click="dialogFormVisiblePreservation()" :disabled="elTooltipShowComputed">保存</el-button>
                        </span>
                    </el-tooltip>
                </span>
            </template>
        </el-dialog>
    </div>

</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { computed, watch } from '@vue/runtime-core'
import {ArrowRight} from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import axios from 'axios'
export default {

    props: ['modelValue','openShow'],
    emits: ['backData','isUpdate'],
    setup(props,{emit}){
        const store =  useStore();
        
        
        //父类接收数据,到数据展
        let dialogFormVisible = ref(false)
        const thisData = reactive({
            dialogFormVisibleData:null,
            
        })
        //用户输入
        let userInputName = ref('')
        let updateOperationRecordRemarks = ref('')
        thisData.dialogFormVisibleData = props.modelValue
        dialogFormVisible.value = props.openShow
        userInputName.value = thisData.dialogFormVisibleData.industryName
        updateOperationRecordRemarks.value = thisData.dialogFormVisibleData.updateOperationRecordRemark
        const industryData = computed(() => {
            
            return thisData.dialogFormVisibleData
        })
        //监听器
        
         watch(() => props.openShow, function (newVal, oldVal) {
            dialogFormVisible.value = newVal
            
        }, {
            deep: true,
            immediate: false
        })
        watch(() => props.modelValue, function (newVal, oldVal) {
            console.log("werw")
            thisData.dialogFormVisibleData = newVal
            userInputName.value = newVal.industryName
            updateOperationRecordRemarks.value = newVal.updateOperationRecordRemarks
            
        }, {
            deep: true,
            immediate: false
        })
        //******************************************************************************11 */
        //监听openThisDislog的值，判断当前弹出框是否打开,如果有改变传给父组件
        watch(dialogFormVisible,(newVal,oldVal)=>{
            emit('backData',newVal)
        })

        //******************************************************************************11 */
        
        //当前时间
        const nowData = computed(()=>{
            return new Date().toLocaleString();
        })
         //******************************************************************************11 */
        //开关组件操作和嵌套弹出层相关操作
         let switchValue = ref(false)
         let switchValueQIanTao = ref(false)
         //当前类型原上级类型数组
         let thisTypeOldArray = ref([])
         //用户可选择的数组
         let thisTypeXuanZe = ref([])
        //是否禁用开关主键
        const disabledSwitch = computed(()=>{
            if(thisData.dialogFormVisibleData.level == 1){
                return true
            }
            return false
        })
        //触发操作
        let subjectDataThis = ref([])
        function switchChange(a){
            disabledPrimary.value = false
            //console.log(store.state.subjectData,'1231221211')
            //初始化
            //console.log('开始时的数组数据',subjectDataThis.value)
            subjectDataThis.value = store.state.subjectData;
            //console.log('开始时的数组数据',subjectDataThis.value)
            thisTypeOldArray.value.splice(0,thisTypeOldArray.value.length)
            thisTypeXuanZe.value.splice(0,thisTypeXuanZe.value.length)
            userXuanZType.value = []
            if(a){
                //console.log('1',thisTypeOldArray.value.length,'2',thisTypeXuanZe.value.length)
                if(thisData.dialogFormVisibleData.level == 3){
                    
                    let tree = thisData.dialogFormVisibleData.industryTree.split('/')
                    tree.forEach((val, index) => {
                        if (val == '') {
                            tree.splice(index, 1)
                        }
                    });
                   // console.log('当前三级的父类id'+tree)
                    subjectDataThis.value.forEach((val,index)=>{
                        //oconsole.log('1')
                        let arrs = []
                        if(val.industryId == tree[0]){
                            //console.log("当前类型第三级别第一次循环")
                            thisTypeOldArray.value.push(val.industryName)
                            //console.log(val)
                            
                        }
                        val.industryAccountType.forEach((vals,indexs) => {
                            
                            if(vals.industryId == tree[1]){
                                //console.log("当前类型第三级别第二次循环")
                                thisTypeOldArray.value.push(vals.industryName)
                            }
                            //vals.industryAccountType = []
                            arrs.push({industryId:vals.industryId,industryName:vals.industryName,industryParentId:vals.industryParentId,level:vals.level})
                        })
                        
                        thisTypeXuanZe.value.push({industryId:val.industryId,industryName:val.industryName,industryParentId:val.industryParentId,level:val.level,industryAccountType:arrs})
                    })
                }else{
                   // console.log('2')
                     subjectDataThis.value.forEach((val,index)=>{
                        if(val.industryId == thisData.dialogFormVisibleData.industryParentId){
                            //console.log("当前类型第二级别第一次循环")
                            thisTypeOldArray.value.push(val.industryName)
                        }
                        //这里出现了一个问题
                        //val.industryAccountType = []
                        thisTypeXuanZe.value.push({industryId:val.industryId,industryName:val.industryName,industryParentId:val.industryParentId,level:val.level})
                    })
                }
                switchValueQIanTao.value = true

            }else{
                 switchValueQIanTao.value = false
                 //switchValue = false
            }
            //console.log(thisTypeOldArray.value,thisTypeXuanZe.value,'数组')
        }
        
        //用户选择修改后的类型
        let userXuanZType = ref([])
        //点击用户选择的类型
        let b = null
        function treeComponent(a){
            //console.log(a)
            if(b != null && b.industryId == a.industryParentId){
                userXuanZType.value.push(a)
            }else if(a.level == 1){
                userXuanZType.value.splice(0,userXuanZType.value.length,a)
            }else{
                store.state.subjectData.forEach((val,index)=>{
                    if(val.industryId == a.industryParentId){
                        userXuanZType.value.splice(0,userXuanZType.value.length,val,a)
                        return;
                    }
                })
               
            }
            b = a
            if(thisData.dialogFormVisibleData.level==3 && userXuanZType.value.length==2){
                //console.log('level3')
                disabledPrimary.value = true
            }else if(thisData.dialogFormVisibleData.level==2 && userXuanZType.value.length==1){
                disabledPrimary.value = true
                // console.log('level2')
            }
            //console.log('点击',thisData.dialogFormVisibleData.level==3 && userXuanZType.value.length==2 || thisData.dialogFormVisibleData.level==2)
        }
        //嵌套弹出层确定和取消操作
        //取消操作
        function switchValueCancel(){
            //console.log(switchValueQIanTao.value)
            switchValueQIanTao.value = false
            switchValue.value = false
            userXuanZType.value = []
            //console.log(switchValueQIanTao.value)
        }
        //确定操作
        function AreYouSure(){
            switchValueQIanTao.value = false
            switchValue.value = false
        }
        //监听嵌套弹出层是否关闭
        watch(switchValueQIanTao,(newVal,oldVal)=>{
            if(!newVal){
                switchValue.value = false
            }
        })
        //确认按钮是否禁用
        let disabledPrimary = ref(false)

        /* const disabledButton = computed(()=>{
           
            return thisData.dialogFormVisibleData.level==3 && userXuanZType.value.length==2 || thisData.dialogFormVisibleData.level==2
        }) */
         //******************************************************************************11 */
        //当前弹出框的取消，保存操作
        //取消
        function dialogFormVisibleCancel(){
            userInputName.value = thisData.dialogFormVisibleData.industryName
            updateOperationRecordRemarks.value = thisData.dialogFormVisibleData.updateOperationRecordRemark
            userXuanZType.value = []
            dialogFormVisible.value = false
        }
        //保存
        
        function dialogFormVisiblePreservation() {
            ElMessageBox.confirm(
                '确认是否保存?',
                '请确认',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {//确认回调函数

                    axios.put("/api/industry/updateIndustryById", {
                        id: thisData.dialogFormVisibleData.industryId,
                        name: userInputName.value,
                        typeId: userXuanZType.value.length != 0 ? userXuanZType.value[userXuanZType.value.length - 1].industryId : thisData.dialogFormVisibleData.industryParentId,
                        time: nowData.value,
                        operationRecordRemarks: updateOperationRecordRemarks.value

                    }).then((response) => {
                        //console.log("fsd")
                        if (response.status == 200) {
                            if (response.data.code == 200) {
                                store.commit('insertData', response.data.data)
                                emit('isUpdate',true)
                                ElNotification({
                                    title: '操作成功',
                                    message: '修改成功',
                                    type: 'success',
                                })
                                userInputName.value = thisData.dialogFormVisibleData.industryName
                                updateOperationRecordRemarks.value = thisData.dialogFormVisibleData.updateOperationRecordRemark
                                userXuanZType.value = []
                                dialogFormVisible.value = false
                            } else {
                                ElNotification({
                                    title: '操作失败',
                                    message: '修改失败',
                                    type: 'error',
                                })

                            }
                        } else {
                            ElNotification({
                                title: '操作失败',
                                message: '操作异常',
                                type: 'warring',
                            })

                        }

                    })

                    //dialogFormVisible.value = false
                }).catch(() => {//取消回调函数

                })

        }
        //bc
        let text = ref('')
        let elTooltipShow = ref(false)
        const elTooltipShowComputed = computed(()=>{
            if(userInputName.value === ''){
                text.value = '请输入名称'
                elTooltipShow.value = false
                return true
            }
            elTooltipShow.value = true
            return false
        })
         //******************************************************************************11 */
         
        return {
            industryData,
            nowData,
            disabledSwitch,
            dialogFormVisible,
            switchValue,
            switchValueQIanTao,
            thisTypeOldArray,
            thisTypeXuanZe,
            userXuanZType,
            disabledPrimary,
            ArrowRight,
            dialogFormVisibleCancel,
            dialogFormVisiblePreservation,
            switchChange,
            treeComponent,
            switchValueCancel,
            AreYouSure,
            userInputName,
            updateOperationRecordRemarks,
            text,
            elTooltipShow,
            elTooltipShowComputed

        }
    }
}
</script>

<style>

</style>